<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据与方法</title>
    <script src="./lib/vue.js" type="text/javascript" charset="utf-8"></script>
    <!-- CDN   对于制作原型或学习，可以这样使用最新版本-->
    <!--    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
</head>
<body>
<!--声明变量 message-->
<!--{{ a }} and {{ b }}-->
<div id="app">
    {{ a }}
</div>

<script type="text/javascript">
    // 声明Vue的对象app，对象的入参el代表元素，id选择器绑定app对象，data中注册所声明的变量并且赋值
    // 我们的数据对象
    var data = {a: 1}

    // 该对象被加入到一个 Vue 实例中
    var vm = new Vue({
        el: '#app',
        data: data
    })

    // 获得这个实例上的 property
    // 返回源数据中对应的字段
    vm.a == data.a // => true

    // // 设置 property 也会影响到原始数据
    // vm.a = 2
    // data.a // => 2
    //
    // // ……反之亦然
    data.a = 3
    // vm.a // => 3
    // 只有当实例被创建时就已经存在于 data 中的 property 才是响应式的。
    data.b = 'hi' // =>
    // vm.b = 'hi' // => hi

    // Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀 $，以便与用户定义的 property 区分开来
    vm.$data === data // => true
    console.log('vm.$data === data 结果为'+ vm.$data === data)
    // $watch 是一个实例方法
    vm.$watch('a', function (newValue, oldValue) {
        // 这个回调将在 `vm.a` 改变后调用
        console.log(newValue, oldValue)
    })
    vm.$data.a = "test ........."
</script>
</body>
</html>
